<template>
  <view class="sms-login-page">
    <!-- 顶部logo和标题 -->
    <view class="header">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="title">短信验证码登录</text>
    </view>

    <!-- 短信登录表单 -->
    <AuthForm 
      :form-items="formItems" 
      :submit-text="'立即登录'"
      :nav-text="'使用账号密码登录'"
      @submit="handleSmsLogin"
      @navigate="handleNavigate"
    >
      <template #extra>
        <view class="agreement">
          <text>登录即表示您同意</text>
          <text class="link" @click="navigateToProtocol">《用户协议》</text>
          <text>和</text>
          <text class="link" @click="navigateToPrivacy">《隐私政策》</text>
        </view>
      </template>
    </AuthForm>
  </view>
</template>

<script setup>
import { ref,onBeforeUnmount } from 'vue';
import AuthForm from './components/AuthForm.vue';

const userStore = function () {
  return {
    login: (user) => {
      uni.setStorageSync('user', user);
    }
  }
};
const countdown = ref(0);
const codeDisabled = ref(false);
let timer = null;

// 表单配置
const formItems = ref([
  {
    type: 'text',
    name: 'mobile',
    label: '手机号',
    placeholder: '请输入手机号码',
    value: '',
    rules: [
      { required: true, message: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
    ]
  },
  {
    type: 'text',
    name: 'code',
    label: '验证码',
    placeholder: '请输入6位验证码',
    value: '',
    extra: {
      type: 'code',
      text: '获取验证码',
      onClick: getSmsCode
    },
    rules: [
      { required: true, message: '请输入验证码' },
      { len: 6, message: '验证码为6位数字' }
    ]
  }
]);

// 获取短信验证码
function getSmsCode() {
  // 验证手机号
  const mobileItem = formItems.value.find(item => item.name === 'mobile');
  const mobile = mobileItem.value;
  
  if (!mobile) {
    uni.showToast({
      title: '请输入手机号码',
      icon: 'none'
    });
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(mobile)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    });
    return;
  }
  
  // 开始倒计时
  countdown.value = 60;
  codeDisabled.value = true;
  
  // 模拟发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  });
  
  // 启动倒计时
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      codeDisabled.value = false;
    }
  }, 1000);
  
  // 实际项目中这里调用API发送短信
  // sendSmsCode(mobile).then(...)
}

// 处理短信登录
function handleSmsLogin(formData) {
  uni.showLoading({ title: '登录中...' });
  
  // 模拟API请求
  setTimeout(() => {
    // 模拟登录成功
    userStore.login({
      id: 1,
      name: '用户',
      mobile: formData.mobile,
      token: 'sms_token_' + Date.now()
    });
    
    uni.hideLoading();
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    
    // 跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }, 1500);
  }, 2000);
}

// 切换到账号密码登录
function handleNavigate() {
  uni.navigateTo({
    url: '/pages/login/login'
  });
}

// 查看用户协议
function navigateToProtocol() {
  uni.navigateTo({
    url: '/pages/protocol/user'
  });
}

// 查看隐私政策
function navigateToPrivacy() {
  uni.navigateTo({
    url: '/pages/protocol/privacy'
  });
}

// 清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.sms-login-page {
  padding: 60rpx 50rpx;
  min-height: 100vh;
  background-color: $white-bg;
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
    
    .logo {
      width: 150rpx;
      height: 150rpx;
      margin-bottom: 20rpx;
    }
    
    .title {
      font-size: $font-size-36rpx;
      color: $text-color;
      font-weight: bold;
    }
  }
  
  .agreement {
    margin-top: 40rpx;
    text-align: center;
    font-size: $font-size-24rpx;
    color: $text-color-666;
    
    .link {
      color: $primary-color;
      margin: 0 5rpx;
    }
  }
}
</style>